<!-- components/VideoUpload/VideoUpload.vue -->
<template>
  <uni-file-picker
      v-model="fileList"
      mode="grid"
      :max-count="maxCount"
      :file-size-limit="fileSizeLimit"
      :file-extname="fileExtname"
      @change="handleChange"
    >
      <view slot="button">
        <uni-icons type="camera" size="32"></uni-icons>
      </view>
    </uni-file-picker>
    <view class="upload-tips">视频数量不超过{{ maxCount }}个，视频大小不超过{{ sizeLimitText }}</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = withDefaults(defineProps<{
  fileSizeLimit?: number
}>(), {
  fileSizeLimit: 50 * 1024 * 1024  // 默认50MB
})

const sizeLimitText = computed(() => {
  const size = props.fileSizeLimit / 1024 / 1024
  return `${size}MB`
})

const emit = defineEmits(['change'])

const fileList = ref([])
const maxCount = 1  // 固定限制1个
const fileExtname = ['mp4']  // 固定视频格式

const handleChange = (files: any) => {
  emit('change', files)
}
</script>
<style lang="scss" scoped>
.upload-tips {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx; position: absolute;
  left: 30rpx;
  bottom: 30rpx;
}
</style>